<template>
  <div class="tw-libchart">
    <div v-show="data.length>0"
      class="tw-datasetchart"
      ref="chart"
      :style="{height: height, backgroundColor: bgColor}">
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import props from './props'
import chartMixins from '../tw-lib-base/chart/chart'

export default {
  name: 'chart-bar-line-twoy',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chartType: this.leftType
    }
  },

  computed: {
    xNamePad () {
      if (this.xNamePadding instanceof Array) {
        return this.xNamePadding
      } else if (this.xNamePadding === '') {
        return []
      } else {
        let name = this.xNamePadding.split(',')
        let label = []
        for (let i = 0; i < name.length; i++) {
          if (name[i]) {
            label.push(parseInt(name[i]))
          } else {
            label.push(0)
          }
        }
        return label
      }
    },
    yNamePad () {
      if (this.yNamePadding instanceof Array) {
        return this.yNamePadding
      } else if (this.yNamePadding === '') {
        return []
      } else {
        let name = this.yNamePadding.split(',')
        let label = []
        for (let i = 0; i < name.length; i++) {
          if (name[i]) {
            label.push(parseInt(name[i]))
          } else {
            label.push(0)
          }
        }
        return label
      }
    },
    yNamePad1 () {
      if (this.yNamePadding1 instanceof Array) {
        return this.yNamePadding1
      } else if (this.yNamePadding1 === '') {
        return []
      } else {
        let name = this.yNamePadding1.split(',')
        let label = []
        for (let i = 0; i < name.length; i++) {
          if (name[i]) {
            label.push(parseInt(name[i]))
          } else {
            label.push(0)
          }
        }
        return label
      }
    },
  },

  methods: {
    setSeries () {
      let vm = this
      let length = 0
      let lineData = []
      if (this.seriesIsRow) {
        length = this.data.length
        if (this.lineName === '' && length > 0) {
          lineData = [this.data[length - 1][0]]
        } else if (this.lineName) {
          lineData = this.lineName.split(',')
        }
      } else {
        if (this.data[0] instanceof Array) {
          length = this.data[0].length
        } else {
          length = 0
        }
        if (this.lineName === '' && length > 0) {
          lineData = [this.data[0][length - 1]]
        } else if (this.lineName) {
          lineData = this.lineName.split(',')
        }
      }

      this.series = []
      for (let i = 0; i < length - 1; i++) {
        let series = {}
        if (this.seriesIsRow) {
          if (length > 0 && lineData.includes(this.data[i + 1][0])) {
            series = {
              type: this.rightType,
              yAxisIndex: 1,
              smooth: this.isSmooth,
              barMaxWidth: this.barMaxWidth,
              stack: this.isBarStackr ? 'stack' : null,
              seriesLayoutBy: 'row',
              lineStyle: {
                type: this.lineType || 'solid'
              }
            }
          } else {
            series = {
              type: this.leftType,
              smooth: this.isSmooth,
              barMaxWidth: this.barMaxWidth,
              stack: this.isBarStack ? 'stack' : null,
              seriesLayoutBy: 'row'
            }
          }
        } else {
          if (length > 0 && lineData.includes(this.data[0][i + 1])) {
            series = {
              type: this.rightType,
              yAxisIndex: 1,
              smooth: this.isSmooth,
              barMaxWidth: this.barMaxWidth,
              stack: this.isBarStackr ? 'stack' : null,
              seriesLayoutBy: 'column',
              lineStyle: {
                type: this.lineType || 'solid'
              }
            }
          } else {
            series = {
              type: this.leftType,
              barMaxWidth: this.barMaxWidth,
              label: {
                show: this.showBarLabel,
                fontSize: this.barLabelFontSize,
                color: this.barLabelColor,
                position: this.barLabelPosition,
              },
              itemStyle: {
                color: this.isGradientsBar ? function (params) {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1,[{
                      offset: 0,
                      color: vm.isGraBarMulColor ? vm.grcolors[0] : vm.grcolors[params.dataIndex * 2] // 0% 处的颜色
                    },{//可根据具体情况决定哪根柱子显示哪种颜色
                      offset: 1,
                      color: vm.isGraBarMulColor ? vm.grcolors[1] : vm.grcolors[params.dataIndex * 2 + 1] // 100% 处的颜色
                    }], false)
                } : null,
                barBorderRadius: [parseInt(vm.barStyleWidth), parseInt(vm.barStyleWidth), 0, 0],

              },
              stack: this.isBarStack ? 'stack' : null,
              seriesLayoutBy: 'column'
            }
          }
        }

        let cusSeries = {}
        if (this.useSeries && this.funcSeries !== '' && typeof this.funcSeries === 'function') {
          cusSeries = this.funcSeries(i, this)
        }
        Object.assign(series, {}, cusSeries)
        this.series.push(series)
      }

      if (this.extendOption && this.funcExtOption !== '' && typeof this.funcExtOption === 'function') {
        this.funcExtOption(this)
      }
    }
  },

  watch: {
    isBarStack () {
      this.setSeries()
    },
    isBarStackr () {
      this.setSeries()
    },
    lineName () {
      this.setSeries()
    },
    seriesIsRow () {
      this.setSeries()
    },
    barMaxWidth () {
      this.setSeries()
    },
    leftType () {
      this.setSeries()
    },
    rightType () {
      this.setSeries()
    },
    showBarLabel () {
      this.setSeries()
    },
    isSmooth () {
      this.setSeries()
    },
    isGradientsBar () {
      this.setSeries()
    },
    isGraBarMulColor () {
      this.setSeries()
    },
    barLabelFontSize () {
      this.setSeries()
    },
    barLabelFontColor () {
      this.setSeries()
    },
    barLabelPosition () {
      this.setSeries()
    },
    grcolors: {
      deep: true,
      handler () {
        this.setSeries()
      }
    },
    extendOption () {
      this.setSeries()
    },
    useSeries () {
      this.setSeries()
    },
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
